:root {
  --eu-color-primary: #{$primary};
  --eu-color-secondary: #{$secondary};
  --eu-color-purple: #{$purple};
  --eu-color-positive: #{$positive};
  --eu-color-danger: #{$danger};
  --eu-color-info: #{$info};
  --eu-color-warning: #{$warning};
  --eu-color-dark: #{$dark};
  --eu-color-grey:#{$grey};
  --eu-color-black: #{$black};
}

.text-dark {
  color: var(--eu-color-dark);
}

.bg-dark {
  background: var(--eu-color-dark) !important;
}

.text-primary {
  color: var(--eu-color-primary) !important;
}

.bg-primary {
  background: var(--eu-color-primary) !important;
}

.text-secondary {
  color: var(--eu-color-secondary) !important;
}

.bg-secondary {
  background: var(--eu-color-secondary) !important;
}

.text-purple {
  color: var(--eu-color-purple) !important;
}

.bg-purple {
  background: var(--eu-color-purple) !important;
}

.text-positive {
  color: var(--eu-color-positive) !important;
}

.bg-positive {
  background: var(--eu-color-positive) !important;
}

.text-error {
  color: var(--eu-color-danger) !important;
}

.bg-error {
  background: var(--eu-color-danger) !important;
}

.text-info {
  color: var(--eu-color-info);
}

.bg-info {
  background: var(--eu-color-info);
}

.text-warning {
  color: var(--eu-color-warning);
}

.bg-warning {
  background: var(--eu-color-warning);
}

.text-white {
  color: #fff;
}

.bg-white {
  background: #fff;
}

.text-black {
  color: #000;
}

.bg-black {
  background: #000;
}

.text-transparent {
  color: transparent;
}

.bg-transparent {
  background: transparent;
}

.text-separator {
  color: $separator-color;
}

.bg-separator {
  background: $separator-color;
}

.text-dark-separator {
  color: $separator-dark-color;
}

.bg-dark-separator {
  background: $separator-dark-color;
}
